<template >
  <div style="padding: 20px" id="customerDetail">
    <div class="back" @click="back">
      <i class="el-icon-arrow-left"></i> 返回
    </div>
    <!--  @tab-click="handleClick"-->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <basicMsg :id="id" v-if="pageOne"></basicMsg>
      </el-tab-pane>
      <el-tab-pane label="订单信息" name="second">
        <orderMsg :id="id" v-if="pageTwo"></orderMsg>
      </el-tab-pane>
      <el-tab-pane label="服务地址" name="third">
        <addressMsg :id="id" v-if="pageThree"></addressMsg>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import basicMsg from "./components/basicMsg";
import orderMsg from "./components/orderMsg";
import addressMsg from "./components/addressMsg";
export default {
  created() {
    console.log("route", this.$route.query.id);
    this.id = this.$route.query.id;
  },
  data() {
    return {
      id: 1,
      activeName: "first",
      pageOne: true,
      pageTwo: false,
      pageThree: false,
    };
  },
  mounted() {},
  methods: {
    //返回上一页
    back() {
      this.$router.back();
    },
    //v-if判断需要渲染的页面
    handleClick(tab) {
      switch (tab.name) {
        case "first":
          this.pageOne = true;
          this.pageTwo = false;
          this.pageThree = false;
          break;
        case "second":
          this.pageOne = false;
          this.pageTwo = true;
          this.pageThree = false;
          break;
        case "third":
          this.pageOne = false;
          this.pageTwo = false;
          this.pageThree = true;
          break;

        default:
          break;
      }
    },
  },
  components: {
    basicMsg,
    addressMsg,
    orderMsg,
  },
};
</script>
<style lang="less" scoped>
.back {
  color: skyblue;
  font-size: 14px;
}
.back:hover {
  cursor: pointer;
}
</style>